import { reactive } from 'vue'
// import { ECOption } from '@/views/system/businessDataChart/types/echart'
export function useTurnoverChange() {
  // 核心导出的 option
  // const option = reactive<ECOption>({
  const option = reactive({
    title: {
      text: '',
      left: '10px',  // 设置标题左边距为 10px
      top: '15px',   // 设置标题距离顶部的间距
    },
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        rotate: 30, // 旋转 45 度，避免文字重叠
        interval: 0, // 显示所有标签
        align: 'right', // 文字右对齐
      },
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar',
        barMaxWidth: 40,
        label: {
          show: true,       // 显示标签
          position: 'top',  // 标签位置在顶部
          formatter: '{c}',  // 使用 {c} 显示 Y 轴的值
          color: '#333',     // 设置标签文字颜色
          fontSize: 14,      // 设置标签字体大小
        },
      }
    ],
    // grid 组件控制图表的整体布局，包括 图表内容区域（包括坐标轴、系列数据等）的位置。
    grid: {
      left: '10%',     // 使图表靠近左边
      right: '10%',    // 使图表靠近右边
      top: '20%',     // 保持顶部和工具栏不重叠
      bottom: '10%',  // 底部留出空间
    },
    // ⭐ 右上角工具栏
    toolbox: {
      show: true,
      right: 10, // 放到右侧
      top: 25, // 放到上方（右上角）
      orient: 'horizontal', // 水平排布
      itemSize: 18, // 每个图标的像素尺寸
      itemGap: 10, // 图标间距（像素）
      showTitle: true, // hover 时显示文字
      // 图标默认/高亮样式（可按需自定义主题色）
      iconStyle: { borderColor: '#666' },
      emphasis: { iconStyle: { borderColor: '#111' } },

      // 内置功能集合
      feature: {
        // 1) 保存为图片
        saveAsImage: {
          show: true,
          title: '保存为图片',
          type: 'png', // png/jpg
          backgroundColor: '#fff', // 输出底色（透明用 'auto'）
          pixelRatio: 2, // 导出清晰度（2 倍像素）
          name: '图表导出' // 文件名
        },
        // 4) 图形切换（在折线/柱状/堆叠/平铺间切换）
        magicType: {
          show: true,
          title: { line: '切折线', bar: '切柱状' },
          type: ['line', 'bar']
        }
      }
    }
  })

  const setOption = (xAxisDataStr: string, seriesDataStr: string, title: string) => {
    let xAxisData = xAxisDataStr.split(',');
    let seriesData = seriesDataStr.split(',')

    option.title.text = title;
    // 设置横坐标
    option.xAxis.data = xAxisData;

    if (option.series && Array.isArray(option.series)) {
      option.series[0].data = seriesData
    }
  }

  return {
    turnoverChangeOption: option,
    setTurnoverChangeOption: setOption
  }
}